<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>修德抄经堂</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.css">
	<script src="../bower_components/mui/dist/js/mui.min.js"></script>
	<script src="../bower_components/jquery/dist/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<link rel="stylesheet" type="text/css" href="../css/caoxuexuanze.css">
</head>
<body>
	<div class="page">
		<div class="header">
			
		</div>
		<div id="main">
			<div id="xianshi">
				<div class="bankuai" style="display: block;">
					<p class="title color same">排版方式</p>
					<div id="kuang" class="teshu">
						<ul>

						</ul>
					</div>
				</div>
				
				<div class="bankuai">
					<p class=" title color same">纸张材质</p>
					<div id="kuang1" class="teshu">
						<ul>

						</ul>
					</div>
				</div>
				
				<div class="bankuai">
					<p class="title color same">装订方式</p>
					<div id="kuang2" class="teshu">
						<ul>

						</ul>
					</div>
				</div>
				
				<div class="bankuai">
					<p class="title color same">字体颜色</p>
					<div id="kuang3" class="teshu">
						<ul>

						</ul>
					</div>
				</div>
			</div>
			
			
			<div id="anniu">
				<div id="shang">
					<img src="../img/benxin/next.png">
					<a class="color same">上一步</a>
				</div>
				<div id="xia">
					<a class="color same">下一步</a>
					<img src="../img/benxin/you.png">
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	mui.init();
</script>
<script>
$(document).ready(function(){
	var i=0;
	$("#shang").hide();

	$("#xia").click(function(){
		$("#shang").show();
		if(i==3){
			$(this).find("a").attr("href","zhifu.html");
			return;
		}else{
			i++;
			$(".bankuai").hide();
			$(".bankuai").eq(i).show();
			$(this).find("a").attr("href","#");
		}
	});

	$("#shang").click(function(){
		if(i==0){
			return;
		}else{
			i--;
			if(i==0){
				$(this).hide();
			}
			$(".bankuai").hide();
			$(".bankuai").eq(i).show();
		}
	});
});

</script>
<script>
$(document).ready(function(){
	var html = '',
	    html1 = '',
        html2 = '',
        html3 = '';
  var versionId = localStorage.getItem('versionId');
	$.ajax({
		url: '/fe/transcript/config_list',
    type: 'get',
    data: {
        "sutra_edition_id": versionId
    },
		success: function (data) {
		    var typeset = data.data.typeset,
		        material = data.data.material,
                bind = data.data.bind,
                fontColor = data.data.font_color;
		    var container1 = $('#kuang ul'),
                container2 = $('#kuang1 ul'),
                container3 = $('#kuang2 ul'),
                container4 = $('#kuang3 ul');
		    function addHtml(name,text,container) {
                for(var i = 0,len = name.length;i<len;i++) {
                    text +=  '<li class="heng" data-id="'+name[i].id+'" data-price="'+name[i].price+'" ' +
                        'data-name="' + name[i].name + '">' +
                        '<img src="'+name[i].img_url+'">' +
                        '<p class="fang">'+name[i].name+'</p>' +
                        '</li>';
                }
                container.append(text);
                container.find('li').eq(0).addClass('sel');
            }
		    //选择排版
            addHtml(typeset,html,container1);
            //纸张材质
            addHtml(material,html1,container2);
            //装订方式
            addHtml(bind,html2,container3);
            //字体颜色
            addHtml(fontColor,html3,container4);
            //选择添加选上的class
//            var typesetId=1,materialId=1,bindId=1,colorId=1;
            $(".bankuai ul li").click(function(){
                $(this).addClass('sel').siblings().removeClass('sel');
                saveId();
            });

            //获取选中的id，存到浏览器中
            function saveId() {
                var typesetId = $('#kuang ul li.sel').data('id'),
                    materialId = $('#kuang1 ul li.sel').data('id'),
                    bindId = $('#kuang2 ul li.sel').data('id'),
                    colorId = $('#kuang3 ul li.sel').data('id');
                var typePrice = $('#kuang ul li.sel').data('price'),
                    mtPrice =  $('#kuang1 ul li.sel').data('price'),
                    bdPrice = $('#kuang2 ul li.sel').data('price'),
                    cPrice = $('#kuang3 ul li.sel').data('id');
                var typesetName = $('#kuang ul li.sel').data('name'),
                    materialName = $('#kuang1 ul li.sel').data('name'),
                    bindName = $('#kuang2 ul li.sel').data('name'),
                    colorName = $('#kuang3 ul li.sel').data('name');

                var message = {
                    "typesetId": typesetId,
                    "typesetPrice": typePrice,
                    "typesetName": typesetName,

                    "materialId": materialId,
                    "materialPrice": mtPrice,
                    "materialName": materialName,

                    "bindId": bindId,
                    "bindPrice": bdPrice,
                    "bindName": bindName,

                    "colorId": colorId,
                    "colorPrice": cPrice,
                    "colorName": colorName,
                }
                var msg = JSON.stringify(message);
                localStorage.setItem('message',msg)
//                var msg1 = localStorage.getItem('message');
//                var msg2 = JSON.parse(msg1);
//                console.log(msg2.typesetId)
            }
            saveId();

        },
		error: function (error) {
			console.log(error)
        }
	})
});
</script>
</html>
